<template>
    <a-modal  :width='600'
    :title='modalProps.title'
    :visible="visible"
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    >
      <a-form  :form='form'>
        
        <a-form-item label='名称' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
            <a-input   v-decorator="['name' , baseInit.name   ]"  />
        </a-form-item>
        <a-form-item label='描述' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }" >
            <a-input    v-decorator="['description' , baseInit.description ]"/>
        </a-form-item>
        <a-form-item label='权限' :label-col='{ span : 4}'  :wrapper-col="{ span : 18 }"  style='max-height: 450px;overflow: auto;'>
              <a-tree
                :treeData="MenuData"   
                checkable
                :defaultExpandAll='true'
                v-model='checkedCode'
                checkStrictly
                @check='check'
              >
                <template  slot="custom"  slot-scope="item"  >
                    <span  :style='{marginTop:"20px",}'  class='testname'>{{ item.name }}</span>
                    {{item.isMenu}}
                </template>
            </a-tree>
        </a-form-item>
        <a-form-item  style='display: none;' >
            <a-input    v-decorator="['code' , baseInit.code]"/>
        </a-form-item>
      </a-form>
    </a-modal> 
</template>

<script>

  import  {  submitAddRole,RoleDetail  }  from  '@/api/system/index'
  
export default {
  name: 'addRole',
  props:{
      visible:{
        type:Boolean,
        default:false
      },
      MenuData:{
        type:Array,
        default:[]
      }
  },
  data () {
    return {
      modalProps:{
          title:'',
          isEdit:false, /*表单进入状态*/
      },
      
      /*form 初始值*/
      baseInit:{
        code:{initialValue:''},/*隐藏input里加上code*/
        name:{ initialValue :'' , rules : [{ required : true , message : '请输入名称' }]},
        description:{ initialValue :'' },
        menuCodes:{ initialValue :[] },
      },
      /*等待动作*/
      confirmLoading: false,

      //选中的check  新增&编辑 时选中
      checkedCode:[],  
                                                                                      
    }
  },
  created(){
    // console.log(this.MenuData)
  },
  methods:{
    check(checkedKeys){
      this.checkedCode = checkedKeys
    },
     handleCancel(e) {
      this.$emit('handleCancel')
      // this.visible = false
    },
    //submit
    handleOk(e) {
      let that = this
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            /*menuCodes 处理*/
            values.menuCodes = this.checkedCode.checked
            // values.menuCodes = this.checkedCode.map(item=>{
            //     return {
            //       code:item
            //     } 
            //   }
            // )
            this.confirmLoading = true;
            let url 
            if(that.modalProps.isEdit == false){
                url ='/sys/role/create_role' //新增 角色
            }
            else{
              url = '/sys/role/modify_role' //修改 角色
            }
            submitAddRole(url,values).then((res)=>{
              that.confirmLoading = false;
              that.$message.info(res.data.msg)
              that.$emit('handleOk')
            })
            .catch((err)=>{
              that.confirmLoading = false;
            })
          }
          else{
            console.log(err)
          }
        });
    },
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  mounted(){
    this.$nextTick(()=>{
      this.$on('openDialog',function(code){
        this.modalProps.isEdit = false
        this.modalProps.title = '添加角色'
        /*清空表单输入和校验*/
        this.form.resetFields()
        /*设置默认值*/
        this.baseInit.code.initialValue = ''
        this.baseInit.name.initialValue = ''
        this.baseInit.description.initialValue = ''
        this.baseInit.menuCodes.initialValue = []
      })
      this.$on('editDialog',async function(code){
        this.modalProps.isEdit = true
        this.modalProps.title = '编辑角色'
        /*清空表单输入和校验*/
        this.form.resetFields()
        /*设置默认值*/
        this.baseInit.code.initialValue = code
        await RoleDetail(code).then((res)=>{
          let data = res.data.data 
          this.baseInit.name.initialValue = data.name
          this.baseInit.description.initialValue = data.description 

          this.checkedCode = data.menuCodes
        })
        
        
      })
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
